/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-11-25 10:47:33
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import Input from "antd/lib/input/Input";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import styles from "./toolTextFontSize.module.less";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";
import { Tooltip } from "antd";

interface Iprops {
}

// 字体大小
export default function ToolTextFontSize() {

  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [fontSize, setFontSize] = useState(20);

  useEffect(() => autorun(() => {
    const { activeObjectId, fontSize, lock } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setDisable(lock || lockNameNum);
      setFontSize(fontSize);
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <div
      className={clsx(styles.toolTextFontSize, visible && styles.visible, disable && styles.disable)}
    >
      <Tooltip
        placement="top"
        title="字体大小"
        mouseEnterDelay={0}
        mouseLeaveDelay={0}
      >
        <Input
          key={fontSize}
          size="small"
          defaultValue={Math.floor(fontSize)}
          style={{
            width: 40,
            border: "none"
          }}
          onWheel={e => {
            const value = (fontSize + Math.sign(e.deltaY));
            setFontSize(value);
            designEditor.setFontSize(value);
          }}
          onBlur={e => {
            const value = parseInt((e.target as HTMLInputElement).value);
            setFontSize(value);
            designEditor.setFontSize(value);
          }}
          onPressEnter={e => {
            const value = parseInt((e.target as HTMLInputElement).value);
            setFontSize(value);
            designEditor.setFontSize(value);
          }}
        />
      </Tooltip>
    </div>
  );

}